<template>
  <div id="tabbar">
    <tabbar-item v-for="(tabbarData,index) in tabbarDatas"
                 :key="index"
                 :index="index"
                 class="tabbar-item"
                 :tabbarData="tabbarData"
                 @click.native="tabbarItemClick(index)"
                 :isSelect="selectIndex == index"
    >
    </tabbar-item>
  </div>
</template>

<script>

  import tabbarItem from './TabbarItem'

  export default {
    name: "Tabbar",
    data:function(){

      return {
        selectIndex: 0
      }
    },
    props:{
      tabbarDatas:{
        type:Array,
        default:function () {
          return []
        }
      }
    },
    methods:{

      tabbarItemClick(index){

        if (this.selectIndex == index){

          return;
        }
        this.selectIndex = index;
        this.$emit('click',index);
      }
    },
    components:{
      tabbarItem
    }
  }
</script>

<style scoped>

#tabbar{

  position: fixed;
  height: 49px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: greenyellow;
  display: flex;
  text-align: center;
  font-size: 12px;
  background: #eee;
}

</style>
